<template>
  <button @click="showModal = true">展开弹框</button>
  <teleport to="body">
    <div class="modal-container" v-show="showModal">
      <h3>弹框标题</h3>
      <p>弹框内容</p>
      <button @click="showModal = false">关闭弹框</button>
    </div>
  </teleport>
</template>

<script lang="ts" setup>
import {ref } from 'vue'
let showModal = ref(false)
</script>

<style lang="scss" scoped>
button {
  margin-top: 20px;
  padding: 0 10px;
}

.modal-container {
  width: 300px;
  height: 160px;
  margin-top: 20px;
  box-shadow: 0 0 10px #bbb;
  border-radius: 10px;
  padding: 15px 20px;
  position: fixed;
  top: 50px;
  background-color: #fff;
  left: 50%;
  transform: translateX(-50%);
  box-sizing: border-box;
  text-align: center;

  p {
    margin-top: 20px;
  }

  button {
    margin-top: 20px;
  }
}</style>
